<template>
	<view>
		<uni-nav-bar :shadow="shadow" status-bar fixed :backgroundColor="bgColor" :border="border" :dark="dark">
			<template style="width: 100%; box-sizing: border-box; background-color: red; height: 10px">
				<!-- 导航栏背景颜色非 #ffffff 时 设置文字颜色为 #ffffff -->
				<view class="nav-title" :style="{ color: bgColor == '#FFFFFF' ? 'black' : 'white' }">
					<text>{{ title }}</text>
				</view>
			</template>
			<template v-slot:left>
				<view class="nav-left">
					<navigator v-if="back" open-type="navigateBack" class="uni-radius-circle uni-pa-2"><uni-icons type="back" size="20" color="#3c3c3c"></uni-icons></navigator>
					<slot name="left"></slot>
				</view>
			</template>
		</uni-nav-bar>
	</view>
</template>

<script>
/**
 * UNI-UI导航栏
 * @description 二次封装，简单化调用
 * @property	{String}	title		导航标题
 * @property	{Boolean}	border		下方边框
 * @property	{Boolean}	dark		暗黑模式
 * @property	{Boolean}	back		返回 Navigate.Back()
 */
export default {
	data() {
		return {};
	},
	props: {
		title: {
			type: String,
			default: ''
		},
		border: {
			type: Boolean,
			default: false
		},
		dark: {
			type: Boolean,
			default: false
		},
		back: {
			type: Boolean,
			default: false
		},
		bgColor: {
			type: String,
			default: '#FFFFFF'
		},
		shadow: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		NavigatorBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.nav-title {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 30rpx;
	font-weight: 500;
}
.nav-left {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}
</style>
